import React, { Component } from 'react';
import { Form, Select, Input, Modal, Icon, Button } from 'antd';
import Tips from '../../Tips/index';
import { connect } from 'react-redux';
const FormItem = Form.Item;
const Option = Select.Option;
const { TextArea } = Input;

let uuid = 0;
const Token = localStorage.getItem('token');
class operation extends Component {
  constructor(props) {
    super(props);
    this.state = {
      argnum: []
    };
  }
  remove = (k) => {
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue('keys');
    // We need at least one passenger
    // can use data-binding to set
    form.setFieldsValue({
      keys: keys.filter(key => key !== k),
    });
  }

  add = () => {
    const { form } = this.props;
    // can use data-binding to get
    const keys = form.getFieldValue('keys');
    const nextKeys = keys.concat(uuid);
    uuid++;
    // can use data-binding to set
    // important! notify form to detect changes
    form.setFieldsValue({
      keys: nextKeys,
    });
  }
  cancel = () => {
    const { form } = this.props;
    uuid = 0;
    form.setFieldsValue({
      keys: [],
    });
    this.props.onCancel();
  }

  handleSubmit = (e) => {
    e.preventDefault();
    this.props.form.validateFields((err, values) => {
      if (!err) {
        let valuearr = [];
        if (values.names) {
          valuearr = values.names.filter((e, i) => {
            return e;
          });
        }
        valuearr.unshift(values.agard);
        this.props.onCreate(valuearr);
      }
    });
  }

  render() {
    const { getFieldDecorator, getFieldValue } = this.props.form;
    const formItemLayout = {
      labelCol: {
        xs: { span: 24 },
        sm: { span: 5 }
      }
    };
    const formItemLayoutWithOutLabel = {
      wrapperCol: {
        xs: { span: 24, offset: 5 }
      }
    };
    getFieldDecorator('keys', { initialValue: [] });
    const keys = getFieldValue('keys');
    const formItems = keys.map((k, index) => {
      return (
        <FormItem
          {...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
          label={index === 0 ? '参数' : ''}
          required={false}
          key={k}
        >
          {getFieldDecorator(`names[${k}]`, {
            validateTrigger: ['onChange', 'onBlur'],
            rules: [{
              required: true,
              whitespace: true,
              message: '请输入参数',
            }],
          })(
            <Input placeholder="请输入参数" style={{ width: '60%', marginRight: 8 }} />
          )}
          <Icon
            className="dynamic-delete-button"
            type="minus-circle-o"
            onClick={() => this.remove(k)}
          />
        </FormItem>
      );
    });
    return (
      <div>
        <Modal
          visible={this.props.visible}
          title="操作Chaincode"
          onCancel={this.cancel}
          closable={false}
          okText="执行"
          cancelText="取消"
          onOk={this.handleSubmit}
          destroyOnClose={true}
        >
          <Form >
            <FormItem
              label="agard"
              labelCol={{ span: 5 }}
              // wrapperCol={{ span: 16 }}
            >
              {
                getFieldDecorator('agard', {
                  rules: [{
                    required: true,
                    whitespace: true,
                    message: '请输入操作方法'
                  }],
                })(
                  <Input placeholder="请输入操作方法" style={{ width: '60%', marginRight: 8 }} />
                )
              }
            </FormItem>
            {formItems}
            <FormItem {...formItemLayoutWithOutLabel}>
              <Button type="dashed" onClick={this.add} style={{ width: '60%' }}>
                <Icon type="plus" /> 添加参数
              </Button>
            </FormItem>
            <FormItem {...formItemLayoutWithOutLabel}>
            </FormItem>
          </Form>
        </Modal>
        <Tips message={this.state.message} />
      </div>
    );
  }
}
const Operation = Form.create()(operation);
export default connect((state) => {
  return { ...state };
})(Operation);
